<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Title</title>
    <!-- 解决IE9的 对m媒体查询的兼容性-->
    <!--[if lt IE 9]>
    <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/index.css">
    <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
    <script type="text/javascript" src="js/index.js"></script>

    <!--引入 谷歌的字体库-->
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800"
          rel="stylesheet" type="text/css">
    <link href="https://fonts.googleapis.com/css?family=Josefin+Sans:400,100,100italic,300,300italic,400italic,600,600italic,700,700italic"
          rel="stylesheet" type="text/css">
</head>
<body>
<div id="indexHeader"></div><!--加载共头部的容器-->
<div  class="top_content module ">
    <div class="container">
        <div class="row">
            <div class="col-lg-5 col-md-5 col-sm-12 top_left">
                <!--设置图片为响应式图片-->
                <img style="width:100%;height: 305px;" src="images/1.jpg" alt=" " class="img-responsive">
            </div>
            <div class="col-lg-7 col-md-7 col-sm-12 top_right">
                <h3>The Spa at the Peaks Resort, Colorado</h3>
                <h4>The largest spa in Colorado helps its adventure-loving</h4>
                <p>The spa has a strong onboarding program with rigorous training that gives new team members a crystal-clear picture of their job requirements, as well as the resort’s expectations. This process ensures that spa staff are like-minded, with caring and entrepreneurial spirits, explains Sharpe-Keene. “We always set expectations from the beginningand work hard to foster a supportive and compassionate environment where people are valued for all of their contributions,” she adds.</p>
                <div class="more m1">
                    <a href="learnmore.html">Learn More</a>
                </div>
            </div>
            <div class="clearfix"></div>
        </div>
    </div>
</div>
<div  class="middle_content module">
    <div class="container">
        <div class="row">
            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                <div class="middle_item">
                    <img style="width: 100%;" src="images/i_2.jpg" alt=" " class="img-responsive">
                    <h3>Expert Advice for Addressing Cellulite</h3>
                    <p>Experts and formulators weigh in on what ingredients, techniques and treatments will help spa pros address this dimpled dilemma.</p>
                    <div class="more m1">
                        <a href="learnmore.html">Learn More</a>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 ">
                <div class="middle_item">
                    <img style="width: 100%;" src="images/i_3.jpg" alt=" " class="img-responsive">
                    <h3>The Wellness Center at Pura Vida Retreat & Spa</h3>
                    <p> Guests flock to the destination for a variety of therapeutic modalities, with menu categories that include Ayurvedic treatments</p>
                    <div class="more m1">
                        <a href="learnmore.html">Learn More</a>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 ">
                <div class="middle_item">
                    <img style="width: 100%;" src="images/i_1.jpg" alt=" " class="img-responsive">
                    <h3>Spas’ Go-To Strategies for Soothing Sun-Kissed Skin</h3>
                    <p>We recommend the Éminence Stone Crop line and Rosehip & Lemongrass Soothing Hydrator to our clientele, in addition to a Restorative Facial & Body </p>
                    <div class="more m1">
                        <a href="learnmore.html">Learn More</a>
                    </div>
                </div>
            </div>
            <div class="clearfix"></div>
        </div>
    </div>
</div>
<!--banner-->
<div class="banner_wrap ">
    <div class="container">
        <div class="banner"><!-- banner 的框 -->
            <ul class="banner_list"> <!-- banner 移动的元素-->
                <!--第一块-->
                <li class="banner_item" > <!-- 单个 的bannner的视图-->
                        <div class="banner_top"> <!-- banner的 顶部内容-->
                            <div class="top_left">
                                <img src="images/xn_banner/11.jpg" alt="">
                            </div>
                            <div class="top_right img_12">
                                <h3>Neque Porro Quisquam Est,Reprehenderit Qui</h3>

                                <h4>VERITATIS ET QUASI ARCHITECTO BEATAE VITAE DICTA SUNT EXPLICABO</h4>

                                <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
                                    laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
                                    architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia
                                    voluptas
                                    sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui
                                    ratione
                                    voluptatem sequi nesciunt.</p>
                            </div>
                            <div class="clearfix"></div>
                        </div>
                        <div class="banner_bottom"> <!--banner 的下面的内容-->
                            <div class="btm_left img_13">
                                <h3>Neque Porro Quisquam Est Qu Sed</h3>
                                <p>
                                    Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia
                                    consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
                                </p>
                            </div>
                            <div class="btm_left1">
                                <img src="images/xn_banner/14.png" alt="">
                            </div>
                            <div class="btm_right img_15">
                                <div class="more">
                                    <a href="learnmore.html">Learn More</a>
                                </div>
                            </div>
                            <div class="clearfix"></div>
                        </div>
                </li>
                <!--第二块-->
                <li class="banner_item" > <!-- 单个 的bannner的视图-->
                    <div style="width: 100%">
                        <div class="banner_top"> <!-- banner的 顶部内容-->
                            <div class="top_left">
                                <img src="images/6.jpg" alt="">
                            </div>
                            <div class="top_right">
                                <h3>Neque Porro Quisquam Est,Reprehenderit Qui</h3>

                                <h4>VERITATIS ET QUASI ARCHITECTO BEATAE VITAE DICTA SUNT EXPLICABO</h4>

                                <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
                                    laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
                                    architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia
                                    voluptas
                                    sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui
                                    ratione
                                    voluptatem sequi nesciunt.</p>
                            </div>
                            <div class="clearfix"></div>
                        </div>
                        <div class="banner_bottom"> <!--banner 的下面的内容-->
                            <div class="btm_left">
                                <h3>Neque Porro Quisquam Est Qu Sed</h3>
                                <p>
                                    Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia
                                    consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
                                </p>
                            </div>
                            <div class="btm_left1">
                                <img src="images/9.jpg" alt="">
                            </div>
                            <div class="btm_right">
                                <div class="more">
                                    <a href="learnmore.html">Learn More</a>
                                </div>
                            </div>
                            <div class="clearfix"></div>
                        </div>
                    </div>
                </li>
                <!--第二块-->
                <li class="banner_item"> <!-- 单个 的bannner的视图-->
                    <div style="width: 100%">
                        <div class="banner_top"> <!-- banner的 顶部内容-->
                            <div class="top_left">
                                <img src="images/xn_banner/31.jpg" alt="">
                            </div>
                            <div class="top_right  img_32">
                                <h3>Neque Porro Quisquam Est,Reprehenderit Qui</h3>

                                <h4>VERITATIS ET QUASI ARCHITECTO BEATAE VITAE DICTA SUNT EXPLICABO</h4>

                                <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
                                    laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
                                    architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia
                                    voluptas
                                    sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui
                                    ratione
                                    voluptatem sequi nesciunt.</p>
                            </div>
                            <div class="clearfix"></div>
                        </div>
                        <div class="banner_bottom"> <!--banner 的下面的内容-->
                            <div class="btm_left img_33">
                                <h3>Neque Porro Quisquam Est Qu Sed</h3>
                                <p>
                                    Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia
                                    consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
                                </p>
                            </div>
                            <div class="btm_left1">
                                <img src="images/xn_banner/34.png" alt="">
                            </div>
                            <div class="btm_right img_35">
                                <div class="more">
                                    <a href="learnmore.html">Learn More</a>
                                </div>
                            </div>
                            <div class="clearfix"></div>
                        </div>
                    </div>
                </li>
                <li class="banner_item" > <!-- 单个 的bannner的视图-->
                    <div class="banner_top"> <!-- banner的 顶部内容-->
                        <div class="top_left">
                            <img src="images/xn_banner/11.jpg" alt="">
                        </div>
                        <div class="top_right img_12">
                            <h3>Neque Porro Quisquam Est,Reprehenderit Qui</h3>

                            <h4>VERITATIS ET QUASI ARCHITECTO BEATAE VITAE DICTA SUNT EXPLICABO</h4>

                            <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
                                laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
                                architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia
                                voluptas
                                sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui
                                ratione
                                voluptatem sequi nesciunt.</p>
                        </div>
                        <div class="clearfix"></div>
                    </div>
                    <div class="banner_bottom"> <!--banner 的下面的内容-->
                        <div class="btm_left img_13">
                            <h3>Neque Porro Quisquam Est Qu Sed</h3>
                            <p>
                                Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia
                                consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
                            </p>
                        </div>
                        <div class="btm_left1">
                            <img src="images/xn_banner/14.png" alt="">
                        </div>
                        <div class="btm_right img_15">
                            <div class="more">
                                <a href="learnmore.html">Learn More</a>
                            </div>
                        </div>
                        <div class="clearfix"></div>
                    </div>
                </li>
                <div class="clearfix"></div>
            </ul>
        </div>
    </div>
    <ul class="banner_nav">
        <li class="active">1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</div>
<div class="keep_in_touch">
    <div class="container">
        <div class="row">
            <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12 touch_text">
                <h3>Keep In Touch</h3>
                <p>We Will give you latest information about spa.</p>
            </div>
            <div class="col-lg-8 col-md-8 col-sm-12 col-xs-12 touch_input">
                <input type="text" value="Enter Your Mail..." itemscope="Enter Your Mail..." onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Enter Your Mail...';}" required="">
                <input type="submit" value=" ">
            </div>
            <div class="clearfix"> </div>
        </div>
    </div>
</div>
<div id="footer"></div>
<script>
    $("#indexHeader").load("header.html");
    $("#footer").load("footer.html");
</script>

</body>
</html>